﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TreeView_Demo.aspx.cs" Inherits="DotNet.WebUI.BasicControl.TreeView_Demo" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>TreeView Demo</title>
    <link rel="stylesheet" href="../CSS/Menu.css" type="text/css"/>
    <script type="text/javascript" src="../JS/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="../JS/jquery.layout.js"></script>
    <script type="text/javascript" src="../JS/jquery.cookie.js"></script>
    <script type="text/javascript">
        var myLayout;

        $(document).ready(function () {
            myLayout = $('body').layout({
                west__size: 200
		    , west__spacing_closed: 20
		    , west__togglerLength_closed: 100
		    , west__togglerAlign_closed: "top"
		    , west__togglerContent_closed: "功<br />能<br />菜<br />单"
		    , west__togglerTip_closed: "打开菜单"
		    , west__sliderTip: "Slide Open Menu"
		    , west__slideTrigger_open: "mouseover"
            });

        });
	</script>

    <script type="text/javascript">
        $(document).ready(function () {
            //点击触发
            $("#sfqclick dt").click(function () {
                $(this).toggleClass("bottomIco")
			       .next().slideToggle(300)
			       .siblings("dd").slideUp("slow");
                $(this).siblings("dt").removeClass("bottomIco");

                var index = $("#sfqclick dt").index(this);
                $.cookie('the_cookie', index); // 设置cookie
            });

            var cookievalue = $.cookie('the_cookie');
            if (cookievalue) {
                $("#sfqclick dt").eq(cookievalue).click();
            }


            //鼠标触发&&点击
            var times = null;
            $("#sfqmouse dt").mouseover(function () {
                var $self = $(this);
                times = setTimeout(function () {
                    $self.addClass("bottomIco")
                    //注意这里的this! ,window.setTimeout(function(){} this 代表window，所以我们需要在外面先把 $(this)用变量缓存起来，在使用setTimeout(),setInterval()时，要特别注意this。以免出错。
				     .next().slideDown(500)
				     .siblings("dd").slideUp("slow");
                    $self.siblings().removeClass("bottomIco");
                }, 500);
            }).mouseout(function () {
                if (times) {
                    clearTimeout(times);
                }
            }).click(function () {
                $(this).toggleClass("bottomIco")
			       .next().slideToggle(300)
			       .siblings("dd").slideUp("slow");
                $(this).siblings("dt").removeClass("bottomIco");
            });
        });
    </script>

    <script language="javascript" type="text/javascript">
        function TreeviewExpandCollapseAll(treeViewId, expandAll) {
            var displayState = (expandAll == true ? "none" : "block");
            var treeView = document.getElementById(treeViewId);
            if (treeView) {
                var treeLinks = treeView.getElementsByTagName("a");
                var nodeCount = treeLinks.length;

                for (i = 0; i < nodeCount; i++) {
                    if (treeLinks[i].firstChild.tagName) {
                        if (treeLinks[i].firstChild.tagName.toLowerCase() == "img") {
                            var currentToggleLink = treeLinks[i];
                            var childContainer = GetParentByTagName("table", currentToggleLink).nextSibling;
                            if (childContainer.style.display == displayState) {
                                eval(currentToggleLink.href);
                            }
                        }
                    }
                }
            }
        }
        function GetParentByTagName(parentTagName, childElementObj) {
            var parent = childElementObj.parentNode;
            while (parent.tagName.toLowerCase() != parentTagName.toLowerCase()) {
                parent = parent.parentNode;
            }
            return parent;
        } </script>
    
	<style type="text/css">
	.ui-layout-pane { /* all 'panes' */ 
		border: 1px solid #BBB; 
	} 

	.ui-layout-pane-center { /* IFRAME pane */ 
		padding: 0;
		margin:  0;
	} 

	.ui-layout-pane-west { /* west pane */
		padding: 0px; 
		background-color: #EEE !important;
		overflow: auto;
	} 

	.ui-layout-resizer { /* all 'resizer-bars' */
		background: #DDD; 
		} 

		.ui-layout-resizer-open:hover { /* mouse-over */
			background: #9D9; 
		}

	.ui-layout-toggler { /* all 'toggler-buttons' */ 
		background: #AAA; 
		} 

		.ui-layout-toggler-closed { /* closed toggler-button */
			background: #CCC; 
			border-bottom: 1px solid #BBB; 
		} 

		.ui-layout-toggler .content { /* toggler-text */
			font: 14px bold Verdana, Verdana, Arial, Helvetica, sans-serif;
		}

		.ui-layout-toggler:hover { /* mouse-over */ 
			background: #DCA; 
			} 

			.ui-layout-toggler:hover .content { /* mouse-over */ 
				color: #009; 
				}

	/* class to make the 'iframe mask' visible */
	.ui-layout-mask {
		opacity: 0.2 !important;
		filter:	 alpha(opacity=20) !important;
		background-color: #666 !important;
	}

	ul { /* basic menu styling */
		margin:		1ex 0;
		padding:	0;
		list-style:	none;
		position:	relative;
	}

	li {
		padding: 0.15em 1em 0.3em 5px;
	}
		
    a
    {
	    text-decoration:none;
	    color:#000000;
    }

    a:hover{
	    color:#FF6600;
        text-decoration:underline;
    }
	</style>
</head>
<body>
    <form id="form2" runat="server">
        <div class="ui-layout-west" style="text-align:left;">
            <dl id="sfqmouse">
        <asp:TreeView ID="TreeViewDemo" runat="server" ExpandDepth="1">
            <Nodes>
                <asp:TreeNode NavigateUrl="#" Text="导航菜单" Value="1">
                    <asp:TreeNode NavigateUrl="http://www.yngsxy.net" Target="mainFrame"  Text="云南工商学院" Value="1_1">
                        <asp:TreeNode NavigateUrl="http://www.yngsxy.net/Dept/Computer/%E4%BF%A1%E6%81%AF%E5%B7%A5%E7%A8%8B%E5%AD%A6%E9%99%A2.html" Target="mainFrame" Text="信息工程学院" Value="1_1_1"></asp:TreeNode>
                        <asp:TreeNode NavigateUrl="http://www.yngsxy.net/Dept/Information/%E4%BA%A4%E9%80%9A%E6%9C%BA%E7%94%B5%E5%AD%A6%E9%99%A2.html" Target="mainFrame"  Text="交通机电学院" Value="1_1_2"></asp:TreeNode>
                        <asp:TreeNode NavigateUrl="http://www.yngsxy.net/Dept/Education/%E6%95%99%E5%AD%A6%E7%AE%A1%E7%90%86.html" Text="教务处" Target="mainFrame"  Value="1_1_3"></asp:TreeNode>
                    </asp:TreeNode>
                    <asp:TreeNode NavigateUrl="#" Text="开发技术类" Value="1_2">
                        <asp:TreeNode NavigateUrl="http://www.cnblogs.com/" Target="mainFrame"  Text="博客园" Value="1_2_1"></asp:TreeNode>
                        <asp:TreeNode NavigateUrl="http://www.51cto.com/" Target="mainFrame"  Text="51CTO" Value="1_2_2"></asp:TreeNode>
                        <asp:TreeNode NavigateUrl="http://www.csdn.net/" Target="mainFrame"  Text="程序员大本营" Value="1_2_2"></asp:TreeNode>
                    </asp:TreeNode>
                </asp:TreeNode>
            </Nodes>
        </asp:TreeView>
        <a href="javascript:TreeviewExpandCollapseAll('<%=TreeViewDemo.ClientID%>', true)">展开</a> <a href="javascript:TreeviewExpandCollapseAll('<%=TreeViewDemo.ClientID%>', false)">折叠</a>
            </dl>
        </div>

        <iframe id="mainFrame" name="mainFrame" class="ui-layout-center" width="100%" height="100%" frameborder="0" scrolling="auto" src="#"></iframe>
    </form>
</body>
</html>